<!-- 组件说明 -->
<template>
    <div class='background'>
        <div class="wrapBox">
            <div class="box comeout">
                <!--<div class="commonback" id="eleproBox">
                    <div class="elecontent">
                        <div class="firsttitle">电子政务工程项目的建设服务商</div>
                        <div class="secondtitle">安全技术  应用软件  系统集成</div>
                    </div>
                </div>-->
              <el-carousel :autoplay="false" height="100vh" trigger="click" arrow="never" indicator-position="none" ref="carousel">
                <el-carousel-item v-for="(item,index) in indexbannerArr" :key="index">
                  <img :src="getImgUrl(item.img)" alt="" style="height:100%;width:100%" @mousedown="setActiveItem(index)">
                </el-carousel-item>
              </el-carousel>
              <!--<div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">Slide 1</div>
                  <div class="swiper-slide">Slide 2</div>
                  <div class="swiper-slide">Slide 3</div>
                  <div class="swiper-slide">Slide 4</div>
                  <div class="swiper-slide">Slide 5</div>
                  <div class="swiper-slide">Slide 6</div>
                  <div class="swiper-slide">Slide 7</div>
                  <div class="swiper-slide">Slide 8</div>
                  <div class="swiper-slide">Slide 9</div>
                  <div class="swiper-slide">Slide 10</div>
                </div>
              </div>-->
            </div>

            <div class="box newscenter">
                <div class="commonback" id="newscenter">
                <el-row>
                    <el-col :span="24">
                    <div class="solutioncontent" style="padding-top:8%">NEWS CENTER</div>
                    <div class="solutionsecond" style="color: #3d3e3e;">新闻中心</div>
                    </el-col>
                </el-row>
                <el-row :gutter="15" style="margin-top:2%;">
                    <el-col :span="5" :offset=5 class="newsitem" >
                    <el-card shadow="hover">
                        <div class="newstitle">
                        中心新闻
                        </div>
                        <div class="newssecond">
                        CENTRAL INFORMATION
                        </div>
                        <div class="newslist">
                        <ul style="padding: 0;">
                            <li @click="detialNews(newitem.id)" class="newli" v-for="(newitem,index2) in coninfo" :key="index2">
                            <img src="../assets/img/main/black.png" style="width:16px;position: relative;" alt="">
                            <span style="margin-left: 18px;">{{newitem.title}}</span>
                            </li>
                        </ul>
                        </div>
                        <el-button type="primary" @click="morenews('centerNews')" class="moredetial">更多详情<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </el-card>

                    </el-col>
                    <el-col :span="5" class="newsitem" >
                    <el-card shadow="hover">
                        <div class="newstitle">
                        公司新闻
                        </div>
                        <div class="newssecond">
                        COMPANY NEWS
                        </div>
                        <div class="newslist">
                        <ul style="padding: 0;">
                            <li @click="detialNews(newitem.id)" class="newli" v-for="(newitem,index2) in comNews" :key="index2">
                            <img src="../assets/img/main/black.png" style="width:16px;position: relative;" alt="">
                            <span style="margin-left: 18px;">{{newitem.title}}</span>
                            </li>
                        </ul>
                        </div>
                        <el-button type="primary" @click="morenews('company')" class="moredetial">更多详情<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </el-card>
                    </el-col>
                    <el-col :span="5" class="newsitem" >
                    <el-card shadow="hover">
                        <div class="newstitle">
                        行业新闻
                        </div>
                        <div class="newssecond">
                        INDUSTRY NEWS
                        </div>
                        <div class="newslist">
                        <ul style="padding: 0;">
                            <li class="newli" @click="detialNews(newitem.id)" v-for="(newitem,index2) in inNews" :key="index2">
                            <img src="../assets/img/main/black.png" style="width:16px;position: relative;" alt="">
                            <span style="margin-left: 18px;">{{newitem.title}}</span>
                            </li>
                        </ul>
                        </div>
                        <el-button type="primary" @click="morenews('tradeNews')" class="moredetial">更多详情<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                    </el-card>
                    </el-col>
                </el-row>
                </div>
            </div>
            <div class="box services">
                <div class="commonback" id="services">
                <el-row>
                    <el-col :span="24">
                    <div class="solutioncontent">SERVICE</div>
                    <div class="solutionsecond" style="color: #3d3e3e;">服务支持</div>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center" style="margin-top:60px">
                    <el-col :span="4" v-for="(item,index) in serverIconarr" :key="index">
                    <img  :src="getImgUrl(item.iconUrl)" style="width: 150px;height: 150px"  @click="getServices(item.clickRoute)" alt=""><!--class="servericon"-->
                    <div style="padding-top: 20px;cursor:pointer" @click="aaa(item.spanContent)">{{item.spanContent}}</div>
                    </el-col>
                </el-row>
                </div>
            </div>
          <div class="box solution comeout">
            <div class="commonback" id="solution">
              <el-row>
                <el-col :span="24">
                  <div class="solutioncontent" style="padding-top: 6%;">SOLUTION</div>
                  <div class="solutionsecond">解决方案</div>
                </el-col>
              </el-row>
              <el-row :gutter="24" class="row-bg solutionitem" style="display: flex;flex-wrap: wrap;justify-content: center;" >
                <el-col  :span="10" :offset="item.offset" v-for="(item,index) in solutionarr" :key="index">
                  <div >
                    <el-row style="margin-top:15px">
                      <el-col :span="6">
                        <div class="lefticon">
                          <img :src="getImgUrl(item.iconUrl)" style="width:60px;height: 64px" alt="">
                        </div>
                      </el-col>
                      <el-col :span="18">
                        <div class="rightcontent">
                          <div class="oatitle" @click="aaa(item.title)">{{item.title}}</div>
                          <div class="oacontent">
                            {{item.describe}}
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-button @click="lookmore" class="lookmore" type="primary">查看更多</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
            <div class="box services">
                <div class="commonback" id="zizhi">
                <el-row>
                    <el-col :span="24">
                    <div class="solutioncontent">SERVICE</div>
                    <div class="solutionsecond" style="color: #3d3e3e;">公司资质</div>
                    </el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="center" style="margin-top:60px">
                <!-- <el-col :span="4" v-for="(item,index) in serverIconarr" :key="index">
                    <img :src="item.iconUrl" class="servericon" @click="getServices(item.clickRoute)" alt="">
                    <div style="padding-top: 20px;">{{item.spanContent}}</div>
                    </el-col>-->
                    <div class="box comeout">
                    <!--<div class="commonback" id="eleproBox">
                        <div class="elecontent">
                            <div class="firsttitle">电子政务工程项目的建设服务商</div>
                            <div class="secondtitle">安全技术  应用软件  系统集成</div>
                        </div>
                    </div>-->
                    <el-carousel style="margin-bottom:30px" :interval="4000" type="card" height="200px">
                        <el-carousel-item v-for="(item,index) in zizhibannerArr" :key="index">
                        <img :src="getImgUrl(item.img)" alt="" style="height:100%;width:100%">
                        </el-carousel-item>
                    </el-carousel>
                    </div>
                </el-row>
                </div>
            </div>
            <div class="box partner">
                <div class="commonback" id="partner">
                    <el-row style="height:35vh">
                        <el-col :span="24">
                            <div class="solutioncontent">COOPERATIVE PARTNER</div>
                            <div class="solutionsecond" style="color: #3d3e3e;">服务客户</div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15" style="padding:30px 0;height:40vh">
                        <!--<el-col  :span="5" style="display: flex;margin-top:30px;justify-content: center;" :offset="item.offset" v-for="(item,index) in partnerImg" :key="index">
                            <div style="box-shadow: 2px 4px 5px #949494;width:70%">
                                <img :src="item.img" alt="" style="width:90%;cursor: pointer;" @click="getPartner(item.url)">
                            </div>
                        </el-col>-->
                      <el-carousel style="margin-bottom:30px" :interval="4000" type="card" height="200px">
                        <el-carousel-item v-for="(item,index) in kehubannerArr" :key="index">
                          <img :src="getImgUrl(item.img)" alt="" style="height:100%;width:100%">
                        </el-carousel-item>
                      </el-carousel>
                     <!-- <div class="wrap">
                        <div class="boxdiv">
                          <ul id="box1" class="ullunbo">
                            <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
                            <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
                            <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
                            <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
                            <li style="background:url(../../src/assets/img/main/bjbank.png) no-repeat"></li>
                          </ul>
                          <ul id="box2"></ul>
                        </div>
                      </div>-->
                    </el-row>
                    <common-footer style="height:30vh"></common-footer>
                </div>
            </div>
        </div>
        <div class="nav">
            <ul>
                <!-- ['首页','新闻中心','服务与支持','解决方案','公司资质','服务客户'] -->
                <li class="current nav_main"></li>
                <li class="nav_news"></li>
                <li class="nav_services"></li>
                <li class="nav_solution"></li>
                <li class="nav_zizhi"></li>
                <li class="nav_partner"></li>
            </ul>
        </div>
        <div style="position: fixed;
    top: 39%;
    right: 20px;cursor: pointer;" @click="getTops">
            <img style="width:25px;" src="../assets/img/main/scrolltop.png" alt="">
        </div>
    </div>
</template>
<script>


    import {getNewsList,getNewsDetial,getProductList} from '../request/api'
    import CommonFooter from '../components/common/Footer'
    import Bus from '../request/bus'
    import {getBannerinfo} from '../request/api'
    import {getZizhi} from '../request/api'
    import {getKehu} from '../request/api'
    export default {
        components: {
            CommonFooter
        },
        data () {
            return {
                currentAuthor:'#eleproBox',
                //服务支持
                serverIconarr:[],
                solutionarr:[],

                //行业新闻
                inNews:[] ,
                //公司新闻
                comNews:[],
                //中心动态
                coninfo:[],
                partnerImg:[
                    {img:require('../assets/img/main/center.png'),offset:2,url:'http://www.miit.gov.cn/'},
                    {img:require('../assets/img/main/cc.png'),offset:0,url:'https://www.cert.org.cn/'},
                    {img:require('../assets/img/main/bh.png'),offset:0,url:'https://www.buaa.edu.cn/'},
                    {img:require('../assets/img/main/hn.png'),offset:0,url:'http://www.hntx.org.cn/'},
                ],
                //初始化滑动屏幕的当前索引
                key:0,
                //记录上一屏，这一屏滚动将要消失
                prev:0,
                //首页轮播图信息
              indexbannerArr:[],
              //公司资质轮播图
              zizhibannerArr:[],
              //服务客户轮播图,
              kehubannerArr:[]
            };
        },
        computed: {

        },
        methods: {
          aaa(parmas){
            console.log(parmas)
            Bus.$emit('looksolution',parmas)

          },
          setActiveItem(index){
            // this.$refs.carousel.setActiveItem(++index)

            let e=event
            e.preventDefault()

            if(event.button==0){
              // console.log("起始位置",e.clientX,e.clientY)
              let odiv = e.target;    //获取目标元素

              let disX = e.clientX
              let disY = e.clientY


              document.onmouseup = (e) => {
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                if(left>0){
                  this.$refs.carousel.setActiveItem(--index)
                }else if(left==0){

                }
                else{
                  this.$refs.carousel.setActiveItem(++index)
                }

                document.onmouseup = null;
              };
            }


          },
            getTops(){
                let vue = this;
                          $('.wrapBox').stop(true).animate({top:'0%'},1000);
                          vue.key = 0;
                          vue.prev = 0;
                          $('.nav li').eq(vue.key).addClass('current').siblings().removeClass('current');
                        },
                      getImgUrl(url){
                        return "http://39.99.217.167:8080"+url;
                      },
                      //点击伙伴获取链接
                      getPartner(url){
                        window.open(url)
                      },
                      //初始化整屏幕滑动的组件
                      initAllScroll(){
                        let vue = this;
                        vue.out();
                        //滑轮滚动事件
                        $(document).mousewheel(function(event,delta){
                          //如果没有处于执行动画状态，方可执行
                          if(!$('.wrapBox').is(':animated')){
                            //两个参数  delta  返回当前往上滚动（1）   往下滚动（-1）
                            /*
                            0   -1    1
                            1   -1    2
                            2   -1    3
                            */
                            vue.key = parseInt(vue.key) - parseInt(delta);
                            if(vue.key < 0){
                              vue.key = 0;
                        }else if(vue.key > 5){
                            vue.key = 5;
                        }
                        $('.wrapBox').stop(true).animate({top:-vue.key*100 + '%'},1000);
                        $('.nav li').eq(vue.key).addClass('current').siblings().removeClass('current');
                    }
                    vue.out();
                    vue.prev = vue.key;
                });
                // var arr = ['首页','解决方案','服务与支持','新闻中心','合作伙伴']
                $('.nav li').bind({
                    mouseenter:function(){
                        // $(this).append('<span>'+arr[$(this).index()]+'</span>');
                    },
                    mouseleave:function(){
                        $(this).find('span').remove();
                    },
                    click:function(){
                        //获取当前索引
                        this.key = $(this).index();
                        $('.wrapBox').stop(true).animate({top:-this.key*100 + '%'},1000);
                        $(this).addClass('current').siblings().removeClass('current');
                        vue.out();
                        this.prev = this.key;
                    }
                });
                //通过按钮点击第一屏动画显示
                $('button:first').click(function(){
                    $('.box').removeClass('comeout');
                });
            },
            out(){
                let vue = this;
                $('.box').eq(vue.prev).addClass('comeout');
                $('.box').eq(vue.key).removeClass('comeout');
            },
            //新闻明细
            detialNews(id){
                Bus.$emit('newsid',id);
            },
            //新闻查看更多
            morenews(newitem){
                Bus.$emit('newslist',newitem);
            },
            //查看更多
            lookmore(){
                Bus.$emit('looksolution');
            },
            //鼠标滑动事件
            mouseMove(){
                console.log('进入滑动mouseMove方法------');
                var kai = true,i=0;
                var oUl = document.getElementById("backul");
                console.log('获取到backul的dom------');
                //判断浏览器类型
                var userAgent = navigator.userAgent;
                var isFF = userAgent.indexOf("Firefox") > -1;
                var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1;
                if(isChrome){
                    window.document.addEventListener('mousewheel', function(ev) {
                        var ev = window.event || ev;
                        if (kai) {
                            kai = false;
                            oUl.style.transition=" 0.5s ease";
                            if (ev.wheelDelta < 0&&i<4) {
                                i++;
                            }
                            if (ev.wheelDelta > 0&&i>0) {
                                i--;
                            }
                            setTimeout(function() {
                                oUl.style.top = -i*100 + 'vh';
                            }, 0);
                            // console.log(i)
                            setTimeout(function() {
                                kai = true;
                            }, 1000);
                        }
                    });
                }else if(isFF){
                    window.document.addEventListener('DOMMouseScroll', function(ev) {
                        var ev = window.event || ev;
                        if (kai) {
                            kai = false;
                            oUl.style.transition=" 0.5s ease";
                            if (ev.wheelDelta < 0&&i<4) {
                                i++;
                            }
                            if (ev.wheelDelta > 0&&i>0) {
                                i--;
                            }
                            setTimeout(function() {
                                oUl.style.top = -i*100 + 'vh';
                            }, 0);
                            // console.log(i)
                            setTimeout(function() {
                                kai = true;
                            }, 1000);
                        }
                    });
                }
                onresize
                window.onresize=function(){
                    oUl.style.transition="none";
                }
            },
            //获取新闻列表
            getNewlist(){
                getNewsList().then(res=>{
                    for(let i=0;i<res.centerNews.length;i++){
                        this.coninfo.push({id:res.centerNews[i].id,title:res.centerNews[i].title});

                    }
                    for(let i=0;i<res.tradeNews.length;i++){

                        this.inNews.push({id:res.tradeNews[i].id,title:res.tradeNews[i].title});
                    }
                    for(let i=0;i<res.companyNews.length;i++){
                        this.comNews.push({id:res.companyNews[i].id,title:res.companyNews[i].title});
                    }
                });

            },
            getService(){
              let service = new Array();

              //产品与解决方案包括服务支持、自主产品、解决方案
              //拿到服务支持
            getProductList().then(res=>{
              //2是服务支持 child 是所有二级菜单
              for(let i=0;i<res.length;i++) {
                if (res[i].id == 2) {
                  let twomenu = res[i].child
                  for (let i = 0; i < twomenu.length; i++) {
                    //拿到三级菜单
                    let threeData = twomenu[i].child
                    /* console.log(JSON.stringify(threeData))*/
                    for (let i = 0; i < threeData.length; i++) {

                      //拿到所有服务支持下三级菜单
                      let data = threeData[i];
                      let image = data.image
                      let clickRoute = data.id
                      let title = data.title
                      service.push({iconUrl: image, clickRoute: clickRoute, spanContent: title})
                    }
                  }
                }
              }
              this.serverIconarr = service.slice(0, 5);
             /* console.log(this.serverIconarr)*/
            });


              //this.serverIconarr = this.serverIconarr.slice(0, 5)
            },
          getSolution(){
            //产品与解决方案包括服务支持、自主产品、解决方案
            //拿到解决方案
            let solution = new Array();
            getProductList().then(res=>{
              //3是解决方案 child 是所有二级菜单
              for(let i=0;i<res.length;i++) {
                if (res[i].id == 3) {
                  let twomenu = res[i].child

                  for (let i = 0; i < twomenu.length; i++) {
                    //拿到三级菜单
                    let threeData = twomenu[i].child
                    for (let i = 0; i < threeData.length; i++) {
                      //拿到所有服务支持下三级菜单
                      let data = threeData[i];
                      let image = data.image
                      let clickRoute = data.id
                      let title = data.title
                      let description = data.description
                      solution.push({iconUrl: image, clickRoute: clickRoute, title: title,describe: description})
                     /* console.log(JSON.stringify(this.solutionarr))*/
                    }
                  }
                }
              }
              this.solutionarr = solution.slice(0, 6);
            });

          },
            //服务支持点击事件
            getServices(route){
                Bus.$emit('servers',route);
            },
            //模拟锚点跳转
            goAnchor(selector) {
                console.log(selector);
                let anchor = this.$el.querySelector(selector);
                let total = anchor.offsetTop;
                // 平滑滚动，时长500ms，每10ms一跳，共50跳
                // 获取当前滚动条与窗体顶部的距离
                let distance = document.documentElement.scrollTop || document.body.scrollTop
                // 计算每一小段的距离
                let step = total/50;
                (function smoothDown () {
                    if (distance < total) {
                        distance += step
                    　　// 移动一小段
                        document.body.scrollTop = distance
                        document.documentElement.scrollTop = distance
                    　　// 设定每一次跳动的时间间隔为10ms
                        setTimeout(smoothDown, 10)
                    } else {
                    　　// 限制滚动停止时的距离
                        document.body.scrollTop = total
                        document.documentElement.scrollTop = total
                    }
                })()
            }
        },
        mounted() {


            this.getNewlist();
            // this.mouseMove();
            this.initAllScroll();
            //获取首页轮播图图
            getBannerinfo().then(res=>{
              this.indexbannerArr = res;
            });
            //获取公司资质轮播图
            getZizhi().then(res=>{
              this.zizhibannerArr = res;
            });
            //获取服务客户轮播图
            getKehu().then(res=>{
                this.kehubannerArr = res;
            });
            this.getService();
            this.getSolution();


        },
      created() {

      },
      //生命周期 - 创建之前
        beforeCreate() {},
        //生命周期 - 挂载之前
        beforeMount() {},
        //生命周期 - 更新之前
        beforeUpdate() {},
        //生命周期 - 更新之后
        updated() {},
        //生命周期 - 销毁之前
        beforeDestroy() {},
        //生命周期 - 销毁完成
        destroyed() {},
        //如果页面有keep-alive缓存功能，这个函数会触发
        activated() {},
    }
</script>


<style scoped>



  body,html{
    width:100%;
    height:100%;
    overflow-y:hidden;
  }
  .wrapBox{
    width:100%;
    height:100%;
    position:fixed;
  }
  .box{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .page1{
    background:url(../assets/img/scroll/b1_bg.jpg) no-repeat center top;
  }
  .page1_02{
    position:absolute;
    top:250px;
    right:30px;
    z-index:9;
    transition:all 2s linear 0s;
  }

  .page1_02_btn{
    margin-top:15px;
    animation:play 1s linear 0s infinite alternate;
    -webkit-animation:play 1s linear 0s infinite alternate;
  }
  @keyframes play{
    from{
      opacity:0.3;
    }
    to{
      opacity:1;
    }
  }
  @-webkit-keyframes play{
    from{
      opacity:0.3;
    }
    to{
      opacity:1;
    }
  }
  .page1_03{
    position:absolute;
    left:50%;
    margin-left:-720px;
    bottom:-130px;
  }
  .page1_04{
    position:absolute;
    right:-50px;
    top:460px;
  }
  .box.comeout .page1_01{
    left:-220px;
    opacity:0;
  }
  .box.comeout .page1_02{
    top:350px;
    opacity:0;
  }
  .page2{
    background:url(../assets/img/scroll/b3_bg.jpg) no-repeat center top;
  }
  .page2_01{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(0deg);
    transition:all 2s ease 0s;
  }
  .box.comeout .page2_01{
    transform:translate(-50%,-50%) rotate(-360deg);
    opacity:0;
  }
  .page3{
    background:yellowgreen;
  }
  .page4{
    background:orange;
  }
  .page5{
    background:purple;
  }
  .page6{
    background:gold;
  }
  .fixedNav{
    height:60px;
    width:100%;
    background:url(../assets/img/scroll/sprite.png) repeat-x;
    position:fixed;
    z-index:10;
  }
  .nav{
    width:22px;
    height:140px;
    padding-top:14px;
    position:fixed;
    top:50%;
    margin-top:-82px;
    right:20px;
    border-radius:10px;
  }
  .nav ul{
    list-style: none;
    width: 22px;
    margin-left: -38px;
  }
  .nav li{
    width:12px;
    height:12px;
    background-color: #fff;
    margin:5px 0;
    cursor:pointer;
    border-radius:50%;
    border: solid 1px #d4d2d2
  }
  .nav .nav_main{
    left: 0;
    top:0;
  }
  .nav li.current{
    background-color: #415cad;
  }
  .anthorbak{
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: 50px;
    bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .anthorbak i{
    color: #409eff;
    font-size: 16px;
  }
  .newslist ul li {
    cursor: pointer;
  }
  .newslist ul li:hover{
    color: #415cad;
  }
  #app{
    overflow: hidden;
  }
  #backul .bakli .commonback{
    width: 100%;
  }
  #backul{
    top: 0;
    position: relative;
    padding: 0;
    margin: 0;
  }
  #backul .bakli{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    /* justify-content: center;
    text-align: center; */
  }
  .background{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .moredetial{
    background-color: #fff;
    color: #000;
    border-color: #fff;
    float: right;
    margin-bottom: 20px;
  }
  .newslist{
    height: 230px;
    overflow: hidden;
  }
  .newli{
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    font-family: AdobeHeitiStd-Regular;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #5b5e66;
    padding: 5px;
    text-align: left
  }
  .newssecond{
    font-family: MicrosoftYaHei;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #415cad;
    margin-top:15px;
    border-bottom: solid 1px;
    margin-top: 6px;
  }
  .newstitle{
    margin-top:8px;
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #3d3e3e;
  }
  .newsitem:hover{
    border-top: solid 5px #415cad;
    transform: scale(1.1);
    padding: 0 !important;
  }
  .servericon{
    width: 120px;
    cursor: pointer;
  }
  .lookmore{
    color: #FFF;
    border-color: #fff;
    opacity: 0.9;
    background: rgb(27, 126, 206,0.1);
    width:160px;
    margin-top: 3%;
  }
  .lefticon{
    display: flex;
    justify-content: center;
  }
  .oatitle{
    font-family: MicrosoftYaHei;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: -1px;
    color: #ffffff;
    line-height: 35px;
    cursor:pointer;
  }
  .oacontent{
    font-family: AdobeHeitiStd-Regular;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    color: #ffffff;
    line-height: 22px;
    height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .solutionitem{
    margin-top: 20px;
    text-align: left;
  }
  .solutioncontent{
    height: 45px;
    font-family: MicrosoftYaHei;
    font-size: 45px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #415cad;
    line-height: 50px;
    padding-top: 10%;
  }
  .solutionsecond{
    padding-top: 20px;
    font-family: MicrosoftYaHei;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
    line-height: 30px;
  }
  .firsttitle{
    font-family: AdobeHeitiStd-Regular;
    font-size: 45px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
    padding-top: 15%;
    height: 45px;
  }
  .secondtitle{
    font-family: AdobeHeitiStd-Regular;
    font-size: 30px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
    padding-top: 50px;
  }
  .nexticon{
    font-size: 20px;
    color: #409eff
  }
  .commonback{
    background-repeat: no-repeat;
    height: calc(100vh);
    background-size: cover;
  }
  .eleproject{
    background-image: url('../assets/img/main/topbg.png');
  }
  .solution{
    background-image: url('../assets/img/main/solution.png');
  }
  .services{
    background-image: url('../assets/img/main/services.png');
  }
  .newscenter{
    background-image: url('../assets/img/main/news.png');
  }
</style>
<style>
  .nav li span{
    width:76px;
    height:19px;
    position:absolute;
    background:url(../assets/img/scroll/sprite.png) no-repeat 0 -80px;
    left:-80px;
    top:0;
    text-align:center;
    line-height:19px;
    color:#fff;
    font-size: 14px;
  }
</style>
